<template>
  <div class="list">
    <div class="search-area">
      <div
        class="bg-image"
        :style="{
          backgroundImage: 'url(' + require('@/assets/bg-search.jpeg') + ')',
        }"
      ></div>
      <div class="content">
        <div class="search">
          <div class="title">
            {{ count }} 个高质量组件、应用示例、图表、页面模版等物料
          </div>
          <div class="search-wrapper" @keydown.enter="handleSearch">
            <input
              v-model="key"
              class="field"
              type="text"
              placeholder="搜索你想找的物料"
            /><button class="btn" @click="handleSearch">搜索</button>
          </div>
          <div class="hotwords">
            热搜：<a
              v-for="(item, index) in hotkeys"
              :key="index"
              @click="handleHotkey(item)"
              >{{ item.title }}</a
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 分类 -->
    <div class="filter-area">
      <div class="container">
        <a
          v-for="(item, index) in categorys"
          :key="index"
          :class="{ active: currCate.title == item.title }"
          @click="changeCate(item)"
          >{{ item.title }}</a
        >
      </div>
    </div>
    <!-- 二级分类标签 -->
    <div class="tag-area">
      <div class="container">
        <div class="tags">
          <a
            v-for="(item, index) in currCate.children"
            :key="index"
            :class="{ active: currTag == item.title }"
            @click="changeTag(item)"
            >{{ item.title }}</a
          >
        </div>
        <div class="sort">
          排序：
          <Dropdown trigger="click" @on-click="handleSort">
            <Icon
              type="md-more"
              color="#a3b1c4"
              size="22"
              style="cursor: pointer"
            />
            <DropdownMenu slot="list">
              <DropdownItem name="like">热门物料</DropdownItem>
              <DropdownItem name="createTime">最新上线</DropdownItem>
              <DropdownItem name="updateTime">最近更新</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </div>
    </div>
    <div class="list-area">
      <div class="container">
        <Row type="flex" :gutter="30">
          <Col span="8" v-for="(item, index) in products" :key="index"
            ><Product :data="item" class="item"
          /></Col>
        </Row>
      </div>
      <!-- <div class="page">
        <Page :total="total" show-elevator show-sizer show-total />
      </div> -->
      <div class="empty-content" v-show="products.length == 0">
        <img src="@/assets/empty.png" width="280px" />
        <div class="text">暂时没有相关物料，换个关键词试试吧</div>
      </div>
    </div>
  </div>
</template>

<script>
import Product from "@/views/components/Product.vue";
import { data } from "@/data/data.js";
import { category } from "@/data/category.js";
import { hotkey } from "@/data/content.js";
export default {
  name: "list",
  components: {
    Product,
  },
  data() {
    return {
      key: "",
      products: [],
      categorys: category,
      hotkeys: hotkey,
      total: 100,
      count: null,
      sort: "like",
      currCate: category[0],
      currTag: category[0].children[0].title,
    };
  },
  methods: {
    goto(v) {
      this.$router.push({
        name: v,
      });
    },
    pagination(pageSize, currentPage, arr) {
      var skipNum = (currentPage - 1) * pageSize;
      var newArr =
        skipNum + pageSize >= arr.length
          ? arr.slice(skipNum, arr.length)
          : arr.slice(skipNum, skipNum + pageSize);
      return newArr;
    },
    getData() {
      let datas = data;
      if (this.currCate.title == "全部" && this.currTag != "不限") {
        // 仅过滤tag
        datas = datas.filter((e) => {
          return e.tag.indexOf(this.currTag) != -1;
        });
      } else if (this.currCate.title != "全部" && this.currTag == "不限") {
        // 仅过滤一级分类
        datas = datas.filter((e) => {
          return e.category.indexOf(this.currCate.title) != -1;
        });
      } else if (this.currCate.title != "全部" && this.currTag != "不限") {
        // 都过滤
        datas = datas.filter((e) => {
          return (
            e.tag.indexOf(this.currTag) != -1 &&
            e.category.indexOf(this.currCate.title) != -1
          );
        });
      }
      // 过滤搜索
      if (this.key) {
        datas = datas.filter((e) => {
          return (
            e.title.indexOf(this.key) != -1 ||
            e.desc.indexOf(this.key) != -1 ||
            e.category.indexOf(this.key) != -1 ||
            e.tag.indexOf(this.key) != -1
          );
        });
      }
      // 排序
      datas = datas.sort((a, b) => {
        if (this.sort == "like") {
          return b[this.sort] - a[this.sort];
        } else {
          return b[this.sort].localeCompare(a[this.sort]);
        }
      });
      this.products = datas;
    },
    handleSort(v) {
      this.sort = v;
      this.getData();
    },
    handleSearch() {
      this.getData();
    },
    handleHotkey(v) {
      this.key = v.title;
      this.getData();
    },
    changeCate(v) {
      this.currCate = v;
      this.currTag = this.currCate.children[0].title;
      this.getData();
    },
    changeTag(v) {
      this.currTag = v.title;
      this.getData();
    },
  },
  mounted() {
    this.count = data.length;
    let q = this.$route.query;
    if (q.key) {
      this.key = q.key;
    }
    if (q.cate) {
      this.categorys.forEach((e) => {
        if (e.title == q.cate) {
          this.currCate = e;
        }
      });
    }
    this.getData();
  },
  watch: {
    $route(to) {
      if (to.query.cate && this.currCate != to.query.cate) {
        this.categorys.forEach((e) => {
          if (e.title == to.query.cate) {
            this.currCate = e;
          }
        });
        this.getData();
      }
    },
  },
};
</script>

<style scoped lang="less">
@import "./list.less";
</style>
